import { Rectangle } from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';
import { isNil } from 'lodash';
import { memo, useEffect } from 'react';
import { useCesium } from 'resium';

const InitCesium = () => {
    const { viewer } = useCesium();

    useEffect(() => {
        if (isNil(viewer)) return;
        // 显示帧率
        viewer.scene.debugShowFramesPerSecond = true;

        // 罗盘
        const options: CesiumNavigation.NavigationOptions = {
            // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
            defaultResetView: Rectangle.fromDegrees(80, 22, 130, 50),
            // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
            enableCompass: true,
            // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
            enableZoomControls: true,
            // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
            enableDistanceLegend: true,
            // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
            enableCompassOuterRing: true,
            // 修改重置视图的tooltip
            resetTooltip: '重置视图',
            // 修改放大按钮的tooltip
            zoomInTooltip: '放大',
            // 修改缩小按钮的tooltip
            zoomOutTooltip: '缩小',
        };
        new CesiumNavigation(viewer, options);
    }, [viewer]);

    return <div id="cesiumContainer"></div>;
};

export default memo(InitCesium);
